<template>
    <fieldset>
        <legend>侦听器</legend>
        <button>点击</button>
        <button @click="handleClick">点击2</button>
        <!-- <button @click="handleClick">点击3</button> -->
    </fieldset>
</template>

<script setup>
import { watch,ref,nextTick,reactive } from "vue"


// 1.侦听器函数的执行优化 （里面的属性一次性回调）

// let msg = ref('')
// let msg2 = ref('小日子')

// // 强制触发侦听器函数进行多次回调 
//     // 需引入 nextTick
// let handleClick = async () => {
//     msg.value = "德国"

//     await nextTick()

//     msg2.value = "阿根廷"

// }

// watch([msg,msg2],(newval)=>{
//     console.log(newval);
// })

// 2. 侦听对象   (需深度侦听)

    //深度侦听
    let obj = reactive({
        name:"雷子",
        age: 30,
        person:{
            nickname:"五五开"
        }
    })

    setTimeout(()=>{
        obj.name = "梅子",
        obj.person.nickname = "卢姥爷"
    },1000)

    // 侦听属性
    // watch(()=>obj.name,(newVal)=>{
    //     console.log(newVal);
    // })

    watch(()=>obj.person,(newVal)=>{
        console.log(newVal);
    },{
        deep:true,
        immediate:true  // watch 有惰性 需要 immediate:true 才能立即执行
    })
</script> 